<template>
	<view>
		<view class="top-container">
			<view class="step-container">
				<view class="icon-1"><text class="desc">个人基本信息</text></view>
				<view class="line"></view>
				<view class="icon-2"><text class="desc">身体状况与饮食习惯</text></view>
				<view class="line"></view>
				<view class="icon-3"><text class="desc">创建个人信息卡</text></view>
			</view>
		</view>
		<!-- 第一页：个人基本信息 -->
		<view class="info-1-container" v-if="showInfoPanel == 1">
			<text class="title">填写个人基本信息</text>
			<text class="desc">填写如下信息，以便我们了解您的身体基本情况，方便提供个性化服务。</text>
			<u-form labelPosition="top" :model="dataForm" :rules="rules" ref="form1" labelWidth="110"
				:labelStyle="labelStyle">
				<u-form-item label="姓名" prop="name" borderBottom ref="name" leftIcon="account"
					:leftIconStyle="iconStyle" required>
					<u-input v-model="dataForm.name" border="none" placeholder="输入姓名" />
				</u-form-item>
				<u-form-item label="性别" prop="sex" borderBottom ref="sex" @click="showSex = true" leftIcon="man"
					:leftIconStyle="iconStyle" required>
					<u-input v-model="dataForm.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
						border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="手机号码" prop="phone" borderBottom ref="phone" leftIcon="phone"
					:leftIconStyle="iconStyle" required>
					<u-input v-model="dataForm.phone" border="none" placeholder="输入手机号码" />
				</u-form-item>
				<u-form-item label="电子邮箱" prop="email" borderBottom ref="email" leftIcon="email"
					:leftIconStyle="iconStyle" required>
					<u-input v-model="dataForm.email" border="none" placeholder="输入电子邮箱" />
				</u-form-item>
				<u-form-item label="出生日期" prop="birthday" borderBottom ref="birthday" @click="showDatetime = true"
					leftIcon="calendar" :leftIconStyle="iconStyle" required>
					<u-input v-model="dataForm.birthday" disabled disabledColor="#ffffff" placeholder="请选择您的生日"
						border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="居住地址" prop="address" borderBottom ref="address" leftIcon="home"
					:leftIconStyle="iconStyle" required>
					<u-input v-model="dataForm.address" border="none" placeholder="输入居住地址" />
				</u-form-item>
			</u-form>

			<view class="operate">
				<u-button type="primary" text="下一步" size="large" color="#55aa7f" @click="nextHandle"></u-button>
			</view>
		</view>


		<!-- 第二页：身体状况与饮食习惯 -->
		<view class="info-2-container" v-if="showInfoPanel == 2">
			<text class="title">填写身体状况与饮食习惯</text>
			<text class="desc">填写如下信息，以便我们了解您的身体状况与饮食习惯，方便提供个性化服务。</text>

			<u-form labelPosition="top" :model="dataForm" :rules="rules" ref="form2" labelWidth="110"
				:labelStyle="labelStyle">
				<u-form-item label="身高" prop="height" borderBottom ref="height" leftIcon="tags"
					:leftIconStyle="iconStyle" required>
					<u-input v-model="dataForm.height" border="none" placeholder="输入身高" />
				</u-form-item>
				<u-form-item label="体重" prop="weight" borderBottom ref="weight" leftIcon="tags"
					:leftIconStyle="iconStyle" required>
					<u-input v-model="dataForm.weight" border="none" placeholder="输入体重" />
				</u-form-item>
				<u-form-item label="目标" prop="goal" borderBottom ref="goal" leftIcon="star" :leftIconStyle="iconStyle"
					required>
					<u-input v-model="dataForm.goal" border="none" placeholder="输入目标" />
				</u-form-item>
			</u-form>

			<view class="label">
				<u-icon name="info-circle-fill" size="20" color="#55aa7f"></u-icon>
				<text>请添加您的饮食喜好</text>
			</view>
			<view>
				<u-input v-model="newLikes" @confirm="inputLikesHandle" clearable />
				<view class="likes-tabs">
					<u-tag :key="one.id" v-for="one in dataForm.likes" :text="one" plain closable
						@close="closeLikesHandle(one)"></u-tag>
				</view>
			</view>
			


			<view class="label">
				<u-icon name="info-circle-fill" size="20" color="#55aa7f"></u-icon>
				<text>请添加您的忌口和过敏原</text>
			</view>
			<view>
				<u-input v-model="newDislikes" @confirm="inputDislikesHandle" clearable />
				<view class="dislikes-tabs">
					<u-tag :key="one.id" v-for="one in dataForm.dislikes" :text="one" plain closable
						@close="closeDislikesHandle(one)"></u-tag>
				</view>
			</view>
			
			<view class="label">
				<u-icon name="info-circle-fill" size="20" color="#55aa7f"></u-icon>
				<text>您是否有疾病史</text>
			</view>
			<view>
				<u-input v-model="newDiseases" @confirm="inputDiseasesHandle" clearable />
				<view class="diseases-tabs">
					<u-tag :key="one.id" v-for="one in dataForm.diseases" :text="one" plain closable
						@close="closeDiseasesHandle(one)"></u-tag>
				</view>
			</view>
			
			
			<view class="operate">
				<u-button type="primary" text="提交信息" size="large" color="#55aa7f" @click="submitHandle"></u-button>
			</view>
		</view>


		<!-- 选择性别弹窗 -->
		<u-action-sheet :show="showSex" :actions="sexList" title="请选择性别" @close="
                showSex = false;
                this.$refs.form1.validateField('sex');
            " @select="selectSex"></u-action-sheet>


		<!-- 选择出生日期弹窗 -->
		<u-datetime-picker :show="showDatetime" mode="date" minDate="-2209017600000" @confirm="confirmBirthday" @cancel="
                showDatetime = false;
                this.$refs.form1.validateField('birthday');
            "></u-datetime-picker>

		<!-- 底部图片 -->
		
	</view>
</template>

<script>
	const dayjs = require('dayjs');

	export default {
		data() {
			return {
				img: {
					'icon-1': `${this.shanyiUrl}/page/user/fill_user_info/icon-1.png`
				},
				flag: 'insert',
				showInfoPanel: 1,
				labelStyle: {
					color: '#55aa7f',
					'font-weight': 'bold'
				},
				iconStyle: {
					color: '#55aa7f',
					'font-size': '34rpx',
					'margin-top': '3rpx'
				},
				showSex: false,
				showDatetime: false,
				sexList: [{
						name: '男'
					},
					{
						name: '女'
					}
				],
				newLikes: null,
				newDislikes: null,
				newDiseases: null,
				validate: true,
				rules: {
					name: [{
							required: true,
							message: '请输入姓名',
							trigger: ['change', 'blur']
						},
						{
							type: 'string',
							pattern: '^[\u4e00-\u9fa5]{1,20}$',
							required: true,
							message: '姓名不正确',
							trigger: ['blur', 'change']
						}
					],
					sex: {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
					phone: [{
							required: true,
							message: '请输入手机号码',
							trigger: ['change', 'blur']
						},
						{
							type: 'string',
							pattern: '^1[3-9]\\d{9}$',
							required: true,
							message: '手机号码不正确',
							trigger: ['blur', 'change']
						}
					],
					email: [{
							required: true,
							message: '请输入电子邮箱',
							trigger: ['change', 'blur']
						},
						{
							type: 'email',
							required: true,
							message: '电子邮箱不正确',
							trigger: ['blur', 'change']
						}
					],
					birthday: {
						type: 'string',
						required: true,
						message: '请选择出生日期',
						trigger: ['blur', 'change']
					},
					address: {
						type: 'string',
						required: true,
						message: '请输入居住地址',
						trigger: ['blur', 'change']
					},
					height: {
						type: 'string',
						pattern: '^[0-3]\\.\\d{2}$',
						required: true,
						message: '身高格式不正确，单位m，保留2位小数，如1.83',
						trigger: ['blur', 'change']
					},
					weight: {
						type: 'string',
						pattern: '^(?:\\d{1,2}|[1-4]\\d{2}|500)\\.\\d$',
						required: true,
						message: '体重格式不正确，单位kg，0.0-500.0，保留1位小数，如65.5',
						trigger: ['blur', 'change']
					},
					likes: [],
					dislikes: [],
					diseases: [],
					goal: {
						type: 'string',
						required: true,
						message: '请输入目标',
						trigger: ['blur', 'change']
					}
				},
				dataForm: {
					id: null,
					name: null,
					sex: null,
					phone: null,
					email: null,
					birthday: null,
					address: null,
					height: null,
					weight: null,
					likes: [],
					dislikes: [],
					diseases: [],
					goal: null
				},
				bannerUrl: `${this.shanyiUrl}/banner/banner-4.jpg`
			};
		},
		methods: {
			selectSex(e) {
				this.dataForm.sex = e.name;
			},

			confirmBirthday(e) {
				this.showDatetime = false;
				let date = new Date(e);
				date.setTime(e.value);
				this.dataForm.birthday = dayjs(date).format('YYYY-MM-DD');
				this.$refs.form1.validateField('birthday');
			},

			nextHandle: function() {
				let that = this;
				that.validate = true;
				that.$refs.form1.validateField('name', function(errors) {
					that.validateFieldHandle(that, errors);
				});
				that.$refs.form1.validateField('sex', function(errors) {
					that.validateFieldHandle(that, errors);
				});
				that.$refs.form1.validateField('phone', function(errors) {
					that.validateFieldHandle(that, errors);
				});
				that.$refs.form1.validateField('email', function(errors) {
					that.validateFieldHandle(that, errors);
				});
				that.$refs.form1.validateField('birthday', function(errors) {
					that.validateFieldHandle(that, errors);
				});
				that.$refs.form1.validateField('address', function(errors) {
					that.validateFieldHandle(that, errors);
				});
				// 以上验证是异步的，所以需要定时器预估时间
				setTimeout(() => {
					if (!that.validate) {
						uni.showToast({
							title: '请填写正确的信息',
							icon: 'error'
						});
						return;
					}
					that.showInfoPanel = 2;
				}, 500);
			},

			validateFieldHandle: function(ref, errors) {
				if (errors.length > 0) {
					ref.validate = false;
				}
			},
			
			// 输入偏好
			inputLikesHandle: function() {
				// console.log("回车")
				// console.log(this.newLikes)
				if (this.newLikes != null && this.newLikes != '') {
					// console.log("newLikes不为空")
					// console.log(this.dataForm.likes)
					if (this.dataForm.likes.includes(this.newLikes)) {
						uni.showToast({
							title: '不能添加重复标签',
							icon: 'error'
						});
					} else {
						this.dataForm.likes.push(this.newLikes);
						this.newLikes = null;
					}
				}
			},
			
			// 输入忌口
			inputDislikesHandle: function() {
				if (this.newDislikes != null && this.newDislikes != '') {
					if (this.dataForm.dislikes.includes(this.newDislikes)) {
						uni.showToast({
							title: '不能添加重复标签',
							icon: 'error'
						});
					} else {
						this.dataForm.dislikes.push(this.newDislikes);
						this.newDislikes = null;
					}
				}
			},
			
			// 输入疾病
			inputDiseasesHandle: function() {
				if (this.newDiseases != null && this.newDiseases != '') {
					if (this.dataForm.diseases.includes(this.newDiseases)) {
						uni.showToast({
							title: '不能添加重复标签',
							icon: 'error'
						});
					} else {
						this.dataForm.diseases.push(this.newDiseases);
						this.newDiseases = null;
					}
				}
			},
			
			// 删除偏好
			closeLikesHandle: function(tag) {
				this.dataForm.likes.splice(this.dataForm.likes.indexOf(tag), 1);
			},
			
			// 删除忌口
			closeDislikesHandle: function(tag) {
				this.dataForm.dislikes.splice(this.dataForm.dislikes.indexOf(tag), 1);
			},
			
			// 删除疾病
			closeDiseasesHandle: function(tag) {
				this.dataForm.diseases.splice(this.dataForm.diseases.indexOf(tag), 1);
			},
			
			submitHandle: function() {
				let that = this;
				that.validate = true;
				that.$refs.form2.validateField('height', function(errors) {
					that.validateFieldHandle(that, errors);
				});
				that.$refs.form2.validateField('weight', function(errors) {
					that.validateFieldHandle(that, errors);
				});
				that.$refs.form2.validateField('goal', function(errors) {
					that.validateFieldHandle(that, errors);
				});
				console.log("验证前")
				// 以上验证是异步的，所以需要定时器预估时间
				setTimeout(() => {
					console.log("验证");
					if (!that.validate) {
						uni.showToast({
							title: '请填写正确的信息',
							icon: 'error'
						});
						return;
					}
					that.submitInfo();
				}, 500);
			},
			
			submitInfo: function() {
				let that = this;
				uni.showModal({
					title: '提示消息',
					content: that.flag == 'insert' ? '确定提交信息吗？' : '确定修改信息吗？',
					success: function(resp) {
						if (resp.confirm) {
							let data = that.dataForm;
							let url = that.flag == 'insert' ? that.api.insertUserInfo : that.api.updateUserInfo;
							that.ajax(url, 'POST', data, function(resp) {
								uni.showToast({
									icon: 'success',
									title: that.flag == 'insert' ? '提交成功' : '修改成功'
								});
							});
							setTimeout(function() {
								uni.switchTab({
									url: '/pages/mine/mine'
								});
							}, 1500);
						}
					}
				});
			}

		},
		onLoad: function() {
			let that = this;
			that.ajax(that.api.searchUserInfo, 'GET', {}, function(resp) {
				let data = resp.data;
				if (data.msg == '没有查询到数据') {
					that.flag = 'insert';
					return;
				}
				that.flag = 'update';
				console.log(data)
				that.dataForm = data;
			}, false);
		}
	};
</script>

<style lang="less">
	@import url(fill_user_info.less);
</style>